<!-- 头部 -->
<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 获取用户名
const name = localStorage.getItem('userName')

// 退出登录
const loginout = () => {
  sessionStorage.removeItem('token')
  localStorage.removeItem('userName')
  router.push('/')
}

// 修改头像
const updateAvatar = () => {
  router.push('/avater')
}

// 修改密码
const updatePassword = () => {
  router.push('/password')
}
</script>

<template>
  <el-header class="home-header">
    <div class="school-name">四川信息职业技术学院</div>
    <div>
      <el-dropdown>
        <span class="el-dropdown-link">
          <span class="user-name">{{ name }} </span>
          <el-icon class="el-icon--right" :size="12">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>账号管理</el-dropdown-item>
            <el-dropdown-item @click="updateAvatar">修改头像</el-dropdown-item>
            <el-dropdown-item @click="updatePassword">修改密码</el-dropdown-item>
            <el-dropdown-item @click="loginout">退出空间</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <img class="avater" src="/public/images/avater.webp" alt="" />
    </div>
  </el-header>
</template>
<style lang="scss">
// 头部
.home-header {
  background: #68beb1;
  height: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  // 学校名称
  .school-name {
    color: white;
    font-size: 17px;
    margin-left: 30px;
  }

  // 下拉框
  .el-dropdown-link {
    .el-icon--right {
      color: white;
    }
    .el-icon svg {
      position: relative;
      top: 0.625rem;
      left: -0.625rem;
    }
  }

  // 用户名
  .user-name {
    color: white;
    font-size: 10px;
    position: relative;
    font-size: 12px;
    top: 0.625rem;
    left: -0.625rem;
  }

  // 头像
  .avater {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    margin-right: 0.625rem;
  }
}
</style>
